
//
// Colors
//

$primary:       #6897FF;
$success:       #56D04D;
$warning:       #F6BE00;
$danger:        #FC6F43;

$primary-dark:  #3845E2;
$warning-dark:  #F7BA5B;
$danger-light:  #E84515;

$theme-colors: (
  "primary": $primary,
  "success": $success,
  "warning": $warning,
  "danger": $danger
);

// Fonts
$font-family-base: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-size-base:   16px;

// Base
$container-width:  1200px;

// Head
$line-head-margin-bottom:  28px;
$line-head-sub-margin-top: 11px;
$line-head-line-width:     4px;
$line-head-line-gap:       8px;

$line-head-font-size:      20px;
$line-head-sub-font-size:  14px;
$line-head-line-height:    26px;

$line-head-line-bg-base:   $primary;
$line-head-color-base:     #4A4A4A;
$line-head-sub-color-base: #F7BA5B;

// Forms
$input-height-base:          42px;
$input-padding-horizontal:   24px;

$input-border-color-base:    #E1E2E4;
$input-border-color-active:  #5C8CFF;
$input-border-color-error:   $danger-light;
$input-border-color-valid:   #C2CFEA;

$input-bg-base:              #fff;
$input-bg-grey:              #EEEFF1;
$input-bg-valid:             #F6F9FF;

$input-color-error:          $input-border-color-error;
$input-color-valid:          $primary;
$input-color-base:           #444E5B;
$input-color-help-error:     $input-border-color-error;

$input-font-size-base:       15px;
$input-font-size-hlep:       14px;

$form-label-font-size:       14px;
$form-label-color-base:      #9B9B9B;
$form-label-color-danger:    $danger-light;

$checkbox-size:               18px;
$checkbox-border-color-base:  $input-border-color-base;
$checkbox-bg-base:            $input-bg-base;

$toggle-color-base:           #fff;
$toggle-label-color-base:     $toggle-color-base;

$toggle-width:                     64px;
$toggle-height:                    26px;
$toggle-label-size:                32px;
$toggle-label-padding-horizontal:  8px;
$toggle-handle-size:               26px - 6px;
$toggle-handle-margin-vertical:    6px / 2;

$toggle-label-font-size:           16px;

$toggle-bg-base:                   #CCC;
$toggle-bg-success:                #25d97e;

// Table
$table-head-padding-vertical:   10px;
$table-body-padding-vertical:   19px;

$table-head-bg-base:            $primary;
$table-head-border-color-base:  #5479CD;
$table-body-bg-odd:             #FFFFFF;
$table-body-bg-even:            #F7FAFD;
$table-body-border-color-base:  #EDEDED;

$table-head-font-size:          14px;
$table-body-font-size:          16px;
$table-body-color-base:         #012C59;

// Button
$btn-padding-vertical:   13px;
$btn-padding-horizontal: 34px;
$btn-sm-padding-x:       22px;
$btn-sm-padding-y:       7px;

$btn-font-size-base:     15px;
$btn-font-size-sm:       14px;
$btn-line-height:        1;

$btn-border-radius:      2px;

$btn-bg-disabled:        #DEDEDE;

$btn-bg-default:         #99A4A7;
$btn-bg-default-hover:   darken($btn-bg-default, 15%);
$btn-bg-default-active:  lighten($btn-bg-default, 10%);

$btn-bg-primary:         $primary;
$btn-bg-primary-hover:   $primary-dark;
$btn-bg-primary-active:  #86ACFF;

$btn-bg-warning:         $warning;
$btn-bg-warning-hover:   #DEB118;
$btn-bg-warning-active:  #FFDA5E;

// Icons
$icon-size-base:  18px;

// Badge
$badge-border-radius:       4px;

$badge-font-size-base:      13px;
$badge-line-height:         18 / 13;

$badge-padding-horizontal:  10px;
$badge-padding-vertical:    3px;

$badge-bg-warning:          $warning-dark;

// Modal
$messagebox-border-radius:       6px;
$messagebox-padding-horizontal:  46px;
$messagebox-padding-top:         49px;
$messagebox-padding-bottom:      29px;
$messagebox-content-width:       360px;
$messagebox-close-size:          17px;

// Navbar
$navbar-height: 100px;

// Steps
$steps-item-gap:  220px;
$steps-item-size: 40px;

$steps-bg-base:        #F5F5F5;
$steps-bg-active:      $primary;
$steps-border-base:    #D5DEEA;
$steps-border-active:  $primary;
$steps-color-base:     #52555D;
$steps-color-active:   $primary;

// Steps panel
$steps-panel-border-width: 4px;
$steps-panel-arrow-height: 15px;
$steps-panel-arrow-width:  28px;

// Bootstrap select
$bs-select-color-base:                 $input-color-base;
$bs-select-color-valid:                $primary;
$bs-select-option-color-base:          #6C7375;
$bs-select-option-color-active:        $primary;

$bs-select-border-color-base:          $input-border-color-base;
$bs-select-border-color-active:        $input-border-color-active;
$bs-select-border-color-valid:         $input-border-color-valid;
$bs-select-dropdown-border-base:       #E7EAEE;

$bs-select-bg-base:                    $input-bg-base;
$bs-select-bg-valid:                   $input-bg-valid;
$bs-select-caret-bg-base:              #9B9B9B;
$bs-select-dropdown-menu-shadow:       rgba(103, 150, 255, .16);
$bs-select-option-bg-base:             $input-bg-base;
$bs-select-option-bg-active:           #E8EFFF;

$bs-select-dropdown-padding:           16px;
$bs-select-option-padding-horizontal:  13px;
$bs-select-option-padding-left:        43px;
$bs-select-dropdown-right:             42px + 12px;
$bs-select-dropdown-arrow-size:        4px;

$bs-select-option-font-size:           13px;

// Doc
$doc-font-size-base:                14px;
$doc-line-height:                   19px;
$doc-title-margin-bottom:           5px;

$doc-color-base:                    #333333;

$doc-progress-margin-bottom:        20px;
$doc-progress-padding-left:         45px;
$doc-progress-padding-right:        130px;
$doc-progress-padding-right-lg:     280px;
$doc-progress-padding-bottom:       15px;
$doc-progress-height:               6px;
$doc-progress-border-radius:        3px;
$doc-progress-right-margin:         130px;
$doc-progress-title-right-margin:   100px;

$doc-progress-border-color:         #CCCCCC;
$doc-progress-bg-base:              #DFDFDF;
$doc-progress-bg-success:           #25D97E;
$doc-progress-color-required:       $danger-light;

// Recorder
$recorder-width:                   700px;
$recorder-height:                  502px;
$recorder-toolbar-height:          82px;
$recorder-padding-bottom:          $recorder-toolbar-height;

$recorder-bg-base:                 rgba(0, 0, 0, .9);
$recorder-toolbar-bg-base:         #2E3239;
$recorder-toolbar-padding-top:     8px;
$recorder-toolbar-padding-bottom:  19px;

$recorder-toolbar-font-size:       14px;
$recorder-toolbar-color-base:      #ffffff;

// Flatabs
$flatabs-vertical-margin:         20px;
$flatabs-border-width:            2px;

$flatabs-tab-padding-top:         8px;
$flatabs-tab-padding-horizontal:  15px;
$flatabs-tab-padding-bottom:      10px;
$flatabs-tab-min-width:           156px;

$flatabs-font-size-base:          18px;
$flatabs-line-height-base:        24 / 18;

$flatabs-border-color-base:       #BBC6DE;
$flatabs-color-base:              #6C7375;
$flatabs-color-active:            #FFFFFF;
$flatabs-bg-base:                 #F0F3FC;
$flatabs-bg-active:               $primary;

// Crumbtabs
$crumbtabs-margin-bottom:        30px;
$crumbtabs-border-bottom:        2px;
$crumbtabs-tab-padding-x:        28px;
$crumbtabs-tab-padding-y:        14px;
$crumbtabs-tab-delimit-height:   10px;
$crumbtabs-tab-delimit-width:    2px;

$crumbtabs-tab-font-size:        16px;
$crumbtabs-tab-line-height:      18 / 16;

$crumbtabs-border-color-base:    #E4E7ED;
$crumbtabs-border-color-active:  $primary;
$crumbtabs-tab-color-base:       #464F5D;
$crumbtabs-tab-color-active:     $primary;
$crumbtabs-tab-delimit-bg:       #D0D6E1;

// Tiles

$tiles-header-padding:                 18px;
$tiles-header-inner-padding-x:         54px;
$tiles-header-inner-padding-left:      30px;
$tiles-header-inner-padding-y-top:     23px;
$tiles-header-inner-padding-y-bottom:  10px;
$tiles-body-padding:                   30px 40px 50px;

$tiles-header-color-base:              #2F3945;
$tiles-header-border-color-base:       #EDF0F2;

$tiles-header-font-size-base:          18px;
$tiles-header-line-height-base:        24 / 18;


